<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../yl/index.css" />
  <link rel="stylesheet" href="../../style/index.css" />
  <title>党员信息</title>
  <style>
    .custom-dialog .flex .el-descriptions--large .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
      padding: 1.8px 15px;
    }

    .el-descriptions__label {
      width: 100px;
    }

    .el-tabs {
      height: 100%;
    }

    .el-tabs__content {
      overflow: auto;
    }

    .botton-ann {
      background-color: #eff5ff 0, #e0ecff 100%;
      padding: 8px;
      gap: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .part-diagram {
      margin: auto;
      padding: 20px;
    }

    .part-diagram ul {
      display: flex;
      position: relative;
      list-style-type: none;
      margin: 0;
      padding: 1rem 0.5rem 0rem 0.5rem;
    }

    .part-diagram ul ul::before {
      border-right: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 0;
      right: 50%;
      height: 1rem;
      width: 50%;
    }

    .part-diagram li {
      display: flex;
      flex-direction: column;
      padding: 1rem 0.5rem 0rem 0.5rem;
      position: relative;
      align-items: center;
    }

    .part-diagram li::before {
      border-right: 2px solid rgba(0, 0, 0, 1);
      border-top: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 0;
      right: 50%;
      height: 1rem;
      width: 50%;
    }

    .part-diagram li::after {
      border-top: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 50%;
    }

    .part-diagram li:first-child::before,
    .part-diagram li:last-child::after {
      border-top: none;
    }

    li.part-diagram_root {
      padding: 0;
    }

    li.part-diagram_root::before {
      border-right: none;
    }

    .part-diagram_root p {
      text-align: center;
    }

    .menu-list-ul {
      display: block !important;
    }

    .menu-list-ul li {
      transform: translateX(88px);
      display: block;
      text-align: center;
    }

    .menu-list-ul::before {
      border-right: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 0;
      right: 4.1666666vw !important;
      height: 1rem;
      width: 50%;
    }

    .menu-list-ul li::after {
      border-top: 2px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: 1.6666666vw;
      right: 7.03125vw;
      width: 18%;
    }

    .menu-list-ul li::before {
      border-right: 2px solid rgba(0, 0, 0, 1);
      border-top: 0px solid rgba(0, 0, 0, 1);
      content: '';
      position: absolute;
      top: -1.6666666vw;
      right: 8.333333333vw;
      height: 100%;
      width: 50%;
    }

    .menu-list-ul li:nth-child(1)::before {
      top: -0.8333333vw !important;
    }

    .cs:hover {
      width: 138px;
    }

    .bkuang {
      border: solid 3px #d9413e;
      padding: 28px 26px 8px 26px;
      background: #ffffff;
      border-radius: 12px;
      color: #000000;
      width: 170px;
      text-align: center;
      position: relative;
      /* 新增定位 */
      margin-top: -38px;
      /* 向上移动 */
    }

    .subtitle {
      color: #000000;
      font-size: 14px;
    }

    .nametitle {
      font-size: 18px;
      font-weight: bold;
    }

    .picture {
      background: #ffffff;
      width: 98px;
      height: 98px;
      border: solid 3px #d9413e;
      border-radius: 50%;
      overflow: hidden;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      display: flex;
      z-index: 99;
      /* 确保覆盖在上方 */

    }

    .child_picture {
      background: #ffffff;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .child_picture img {
      width: 90px;
      height: 90px;
    }

    .right {
      overflow-y: auto;
      overflow-x: hidden;
    }

    /* 遮罩层样式 */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      display: none;
    }

    /* 弹窗样式 */
    .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      background-color: white;
      border-radius: 5px;
      padding: 20px;
      z-index: 1001;
      display: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    /* 关闭按钮样式 */
    .close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
    }

    /* 表单样式 */
    .form-container {
      display: flex;
      gap: 40px;
    }

    .formtop {
      margin-top: 20px;
      padding: 0 12px;
    }

    .avatar-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 18px;
    }

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #f0f0f0;
      margin-bottom: 10px;
      overflow: hidden;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      border: solid 1px #999999;
    }

    .upload-btn {
      background: #f0f0f0;
      color: #000000;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
    }

    .form-section {
      flex: 1;
    }

    .form-row {
      display: flex;
      margin-bottom: 15px;
    }

    .form-label {
      width: 100px;
      margin-bottom: 0;
    }

    .form-input {
      flex: 1;
    }

    .form-input input {
      width: 100%;
      padding: 8px;
      border: 1px solid #cccccc;
      border-radius: 4px;
    }

    .form-buttons {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .form-buttons button {
      margin-left: 10px;
      padding: 8px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .cancel-btn {
      background-color: #f0f0f0;
    }

    .submit-btn {
      background-color: #409eff;
      color: white;
    }

    .zoom {
      display: flex;
      position: fixed;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      height: 30px;
      width: 125px;
      right: 40px;
      background-color: #e0ecff;
      z-index: 10
    }

    .zoom .zoom-in,
    .zoom .zoom-out {
      width: 30px;
      height: 30px;
      background: #fff;
      color: #c1c1cd;
      cursor: pointer;
      background-size: 100%;
      background-repeat: no-repeat
    }

    .zoom .zoom-out {
      background-image: url(./js/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png)
    }

    .zoom .zoom-out.disabled {
      opacity: .5
    }

    .zoom .zoom-in {
      background-image: url(./js/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png)
    }

    .zoom .zoom-in.disabled {
      opacity: .5
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="title" v-cloak>
      <div style="margin-bottom: 1%;">
        总人数{{ totalMembers }}人（正式党员{{ fullMembers }}人，预备党员{{
        probationaryMembers }}人）
      </div>
      <div style="padding: 5px;">
        党员名称：<el-input v-model="input" style="width: 200px; margin:0 10px;" placeholder="请输入党员名称"></el-input>
        <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
        <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button>

        <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>添加</el-button>
          <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="import_data" plain
          round>批量导入
        </el-button>
        <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="Batchexport" plain
          round>批量导出</el-button>
        <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>批量导入</el-button>
        <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>批量导出</el-button>
        <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
          round>批量删除</el-button> -->
      </div>
    </div>
    <div class="body" v-cloak>
      <div class="left" v-cloak>
        <!-- 树 -->
        <el-tree id="tree" default-expand-all
          :data-options="JSON.stringify({ 'TableName': 'party_organization', 'NodeCode': '','primary_key':'Party_Organization_SerialNumber' })"
          style="max-width: 600px" :data="treeData" :props="{ label:'Party_Organization_Name'}" default-expand-all
          @node-click="handleNodeClick" :expand-on-click-node="false">
          </template>
        </el-tree>
      </div>
      <div class="right" v-cloak>
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="党员信息" name="first" style="height: 100%; display: flex; flex-direction: column;">
            <el-table id="table" border
              :data-options="JSON.stringify({ 'TableName': 'party_member_information','primary_key':'Party_Member_SerialNumber'})"
              v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
              @selection-change="handleSelectionChange">
              <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
                :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                <template #scope="scope">
                  <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
                    {{ scope.row[column.prop] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="90" fixed="right" align="center" label="是否归档">
                <template v-slot="{row}">
                  <el-tag :type="row.Place_File=='0'?'danger':'success'">{{row.Place_File=='0'?'待归档':'已归档'}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right" width="150">
                <template v-slot="{row}">
                  <div style="display: flex; align-items: center;padding: 5px 5px;">
                    <el-button :type="row.Place_File == '0'?'success':'info'" :disabled="row.Place_File == '1'"
                      size="small" style="margin-right: 10px;" @click="handleEdit(row)">
                      编辑
                    </el-button>
                    <el-dropdown trigger="click" @command="(val)=>{this[val](row)}">
                      <el-badge is-dot v-if="row.Place_File == '0' || (Number(row.Total1) + Number(row.Total2)) > 0">
                        <el-button size="small" type="danger">
                          更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </el-button>
                      </el-badge>
                      <el-button size="small" type="danger" v-else>
                        更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item command="handleShow">
                            党员档案
                          </el-dropdown-item>
                          <el-dropdown-item command="handleEdit1">
                            {{row.Place_File == '0'?'编辑成长轨迹':'追加成长轨迹'}}
                          </el-dropdown-item>
                          <el-dropdown-item command="handleEdit2">
                            {{row.Place_File == '0'?'编辑奖惩记录':'追加奖惩记录'}}
                          </el-dropdown-item>
                          <el-dropdown-item command="handleEdit3">
                            {{row.Place_File == '0'?'编辑党员附件':'追加党员附件'}}
                          </el-dropdown-item>
                          <el-dropdown-item command="handlePlaceFile">
                            <el-badge v-if="row.Place_File == '0' || (Number(row.Total1) + Number(row.Total2)) > 0" value="new">
                              <span>归档</span>
                            </el-badge>
                            <span v-else>归档</span>
                          </el-dropdown-item>
                          <el-dropdown-item command="handleDelete">
                            删除
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination v-if="activeName === 'first'"  style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
            :page-sizes="[20, 100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper"
            :total="Total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </el-tab-pane>
          <el-tab-pane label="党组织架构图" name="second" style="position: relative;">
            <div style="position: absolute; left: 10px; top: 5px;">
              <span style="font-size: 14px;">当前查询党组织:{{nodeName}}</span>
              <span style="color: red;font-size: 14px;">{{nodeName?'':'请选择党组'}}</span>
            </div>
            <div style="width: 100%; overflow: auto;" v-cloak>
              <div class="zoom">
                <div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
                <span>{{ nowVal }}%</span>
                <div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
              </div>
              <div v-loading="loading1" class="part-diagram" :style="`transform: scale(${nowVal / 100});`">
                <yl-tenure-tree @node-click="handleNode" isfirst :data="treeData1"></yl-tenure-tree>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

      </div>
    </div>
  </div>
  </div>
  <script src="../../yl/vue.js"></script>
  <script src="../../config/config.js"></script>
  <script src="../../utils/utils.js"></script>
  <script src="../../utils/mixins.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
  <script src="../../utils/jquery.cookie.js"></script>
  <script src="../../yl/zh-cn.mjs"></script>
  <script src="../../yl/jquery.easyui.min.js"></script>
  <script src="../../yl/jquery.easyui.mobile.js"></script>
  <script src="../../yl/moment.min.js"></script>
  <script src="../../api/request.js"></script>
  <script src="../../utils/xlsx.full.min.js"></script>
  <!-- <script src="../../utils/mixins.js"></script>
  <script src="../../yl/vue.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/zh-cn.mjs"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
<script src="../../../utils/jquery.cookie.js"></script>
  <script src="../../api/request.js"></script> -->
  <script src="./js/index.js"></script>
</body>

</html>